<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<jsp:include page="root_public.jsp"/>
<title>信息列表</title>
<script src="<%=path%>/js/x-layui.js"></script>
<style>
    .layui-table th {
        text-align: center;
    }
</style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
          <a href="javascript:;">首页</a>
          <a href="<%=path%>/mesList">信息管理</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <div class="layui-input-inline">
                <select name="type" lay-filter="typesel">
                    <option value="0">信息类型</option>
                    <option value="1">遗失信息</option>
                    <option value="2">招领信息</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="thing" lay-filter="thingsel">
                    <option value="0">物品类型</option>
                    <option value="1">证件</option>
                    <option value="2">书本</option>
                    <option value="3">财务</option>
                    <option value="4">数码</option>
                    <option value="5">其他</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="status" lay-filter="statussel">
                    <option value="0">处理状态</option>
                    <option value="1">已处理</option>
                    <option value="2">未处理</option>
                </select>
            </div>
            <input type="text" name="search" placeholder="请输入标题" autocomplete="off" class="layui-input search">
            <a class="layui-btn searchBtn"><i class="layui-icon">&#xe615;</i></a>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger delMore"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <span class="x-right" style="line-height:40px">共有数据：<span class="totalNum"></span> 条</span></xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th width="12">
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i></div>
            </th>
            <th width="100">信息标题</th>
            <th width="58">信息类别</th>
            <th width="58">物品类别</th>
            <th width="220">图片</th>
            <th width="120">地点</th>
            <th>描述</th>
            <th width="68">发布人</th>
            <th width="58">状态</th>
            <th width="15">操作</th>
        </tr>
        </thead>
        <tbody class="tbody">
        </tbody>
    </table>
    <div id="demo1"></div>
</div>
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/layui/layui.all.js"></script>
<script>
    ;!function () {
        var typeArray = new Array("失物", "招领"),
            thingArray = new Array("证件", "书本", "财务", "数码", "其他"),
            $tbody = $('.tbody'), allType = 0, allThing = 0, allSearch = "", status = 0, laypage;

        //无需再执行layui.use()方法加载模块，直接使用即可
        var form = layui.form,
            layer = layui.layer,
            laypage = layui.laypage;

        countAllNum(allType, allThing, status, allSearch);

        form.on('select(typesel)', function (data) {
            allType = data.value;
            countAllNum(allType, allThing, status, allSearch);
        });

        form.on('select(thingsel)', function (data) {
            allThing = data.value;
            countAllNum(allType, allThing, status, allSearch);
        });

        form.on('select(statussel)', function (data) {
            status = data.value;
            countAllNum(allType, allThing, status, allSearch);
        });

        /*
        * 模糊搜索
        * */
        $('.searchBtn').click(function () {
            allSearch = $('.search').val();
            countAllNum(allType, allThing, status, allSearch);
        });

        /*
        * 获取信息列表
        * */
        function findList(type, thing, status, search, start) {
            $.ajax({
                type: "post",
                url: "<%=path%>/msg/findList",
                async: true,
                dataType: "json",
                data: {
                    "type": type,
                    "thing": thing,
                    "status": status,
                    "search": search,
                    "start": start
                },
                success: function (data) {
                    var datass = data.data.messageList;
                    $tbody.html("");
                    for (var i = 0; i < datass.length; i++) {
                        var datas = datass[i];
                        var thing = thingArray[parseInt(datas.thing) - 1],
                            type = typeArray[parseInt(datas.type) - 1],
                            dstatus = datas.status;
                        /*
                        * 处理状态
                        * */
                        var spans =
                                '<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">未处理</span>',
                            as = '<a href="javascript:;" class="finishBtn" title="处理">\n' +
                                '                    <i class="layui-icon">&#xe601;</i>\n' +
                                '                </a>';
                        if (dstatus === "1") {
                            as = "";
                            spans =
                                '<span class="layui-btn layui-btn-normal layui-btn-mini">已处理</span>';
                        }
                        var $html = $('        <tr>\n' +
                            '            <td>\n' +
                            '                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id=' + datas.id + '><i class="layui-icon">&#xe605;</i></div>\n' +
                            '            </td>' +
                            '            <td>' + datas.title + '</td>\n' +
                            '            <td>' + thing + '</td>\n' +
                            '            <td>' + type + '</td>\n' +
                            '            <td id="x-img"><img src="<%=path%>/images/bg.png" width="200" alt  ="">点击图片试试\n' +
                            '                <img style="display: none;" src="<%=path%>/images/ico.png" width="200" alt="">\n' +
                            '                <img style="display: none;" src="<%=path%>/images/bg.png" width="200" alt="">\n' +
                            '            </td>\n' +
                            '            <td>' + datas.address + '</td>\n' +
                            '            <td>' + datas.detail + '</td>\n' +
                            '            <td>' + datas.realName + '</td>\n' +
                            '            <td class="td-status">' + spans + '</td>\n' +
                            '            <td class="td-manage">\n' + as +
                            '                <a title="详情" onclick="x_admin_show(\'详情\',\'<%=path%>/msgDetail?id=' + datas.id + '\',450,450)" href="javascript:;">\n' +
                            '                    <i class="layui-icon">&#xe642;</i>\n' +
                            '                </a>\n' +
                            '                <a class="delBtn" title="删除" href="javascript:;">\n' +
                            '                    <i class="layui-icon">&#xe640;</i>\n' +
                            '                </a><div style="display:none;" class="ID">' + datas.id + '</div>\n' +
                            '            </td>\n' +
                            '        </tr>'
                        );
                        $tbody.append($html);
                        layer.ready(function () { //为了layer.ext.js加载完毕再执行
                            layer.photos({
                                photos: '#x-img'
                                //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                            });
                        });
                        //form.render();
                    }
                    /*信息处理*/
                    $('.finishBtn').click(function () {
                        var obj = this;
                        var $id = $(obj).siblings(".ID").text();
                        layer.confirm('确认要' + $(obj).attr('title') + '吗？', function (index) {
                            if ($(obj).attr('title') === '处理') {
                                $.ajax({
                                    type: "post",
                                    url: "<%=path%>/msg/doFinish",
                                    async: true,
                                    dataType: "json",
                                    data: {
                                        "id": $id,
                                    },
                                    success: function (data) {
                                        $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已处理');
                                        layer.msg('已处理!', {icon: 6, time: 700});
                                        countAllNum(allType, allThing, status, allSearch);
                                    }
                                });
                            }
                        });
                    });

                    /*删除*/
                    $('.delBtn').click(function () {
                        var obj = this;
                        var $id = $(obj).siblings(".ID").text();
                        layer.confirm('确认要删除吗？', function (index) {
                            //发异步删除数据
                            $.ajax({
                                type: "post",
                                url: "<%=path%>/msg/delete",
                                async: true,
                                dataType: "json",
                                data: {
                                    "id": $id,
                                },
                                success: function (data) {
                                    countAllNum(allType, allThing, status, allSearch);
                                    $(obj).parents("tr").remove();
                                    layer.msg('已删除!', {icon: 1, time: 700});
                                },
                                error: function (data) {
                                    console.log(data)
                                }
                            });
                        });
                    });
                    $('.tbody .layui-form-checkbox').click(function () {
                        if ($(this).hasClass("layui-form-checked")) {
                            $(this).removeClass("layui-form-checked");
                        } else {
                            $(this).addClass("layui-form-checked");
                        }
                    })
                },
                error: function (data) {
                    console.log(data)
                }
            });
        }

        /*
        * 计算消息总数
        * */
        function countAllNum(type, thing, status, search) {
            $.ajax({
                type: "post",
                url: "<%=path%>/msg/countAllNum",
                async: true,
                dataType: "json",
                data: {
                    "type": type,
                    "thing": thing,
                    "status": status,
                    "search": search
                },
                success: function (data) {
                    $('.totalNum').text(data.data);
                    laypage.render({
                        elem: 'demo1'
                        , count: $('.totalNum').text() //数据总数
                        , jump: function (obj) {
                            this.count = $('.totalNum').text();
                            var start = (obj.curr - 1) * obj.limit;
                            findList(allType, allThing, status, allSearch, start);
                        }
                    });
                },
                error: function (data) {
                    console.log(data)
                }
            });
        }

        //批量删除提交
        $('.delMore').click(function () {
            var data = tableCheck.getData();
            layer.confirm('确认要删除吗？', function (index) {
                var ids = "";
                for (let obj of data) {
                    ids = ids + obj + ";";
                }
                ids = ids.substring(0, ids.length - 1);
                //捉到所有被选中的，发异步进行删除
                $.ajax({
                    type: "post",
                    url: "<%=path%>/msg/deleteMore",
                    async: true,
                    dataType: "json",
                    data: {
                        "ids": ids,
                    },
                    success: function (data) {
                        countAllNum(allType, allThing, status, allSearch);
                        layer.msg('删除成功', {icon: 1, time: 700});
                    },
                    error: function (data) {
                        console.log(data)
                    }
                });
            });
        })
    }();
</script>
</body>
</html>